<template>
  <div class="page-box">
    <div class="page-title fonsSizeTitle">考核季度：{{quarterInfo.quarter_name}}</div>
    <rulePart />
    <div class="work-box">
      <div class="work-box-title  fonsSizeTitle">工作绩效（占比60%）</div>
      <div v-for="(item,index) of from" :key="index" class="work">
        <van-cell-group>
          <van-field required readonly v-model.trim="item.question_name" label="考核标准 " type="textarea" placeholder="请输入考核标准" rows="1" autosize />
        </van-cell-group>
        <van-cell-group>
          <van-field required readonly v-model.trim="item.task" label="考核内容 " type="textarea" placeholder="请输入关键绩效" rows="3" autosize />
        </van-cell-group>
        <van-cell-group>
          <van-field required readonly v-model.trim="item.rare" label="百分比 " type="number" placeholder="请输入1-60之间的数字">
          </van-field>
        </van-cell-group>
      </div>
      <div v-if="!quarterInfo.status&&isMyApprove" class="work">
        <van-cell-group>
          <van-field v-model.trim="message" required clearable label="备注 " type="textarea" placeholder="请输入" rows="3" autosize />
        </van-cell-group>
      </div>
    </div>
    <div v-if="approval_process.submitpsn||approval_process.approvepsn" style="margin-top:16px;" class="van-steps-box">
      <van-steps direction="vertical" :active="initProcessActive()">
        <van-step v-if="approval_process.submitpsn">
          <h3>【{{approval_process.submitpsn.name}}】发起申请</h3>
          <p>{{approval_process.submitpsn.create_time}}</p>
        </van-step>
        <van-step v-for="(item,index) of approval_process.approvepsn" :key="index" v-if="approval_process.approvepsn.length">
          <h3>【{{item.name}}】{{state[item.status||0].lable}} </h3>
          <p>{{item.create_time}}</p>
        </van-step>
      </van-steps>
    </div>
    <div v-if="isMyApprove&&approval_process.approvepsn&&approval_process.approvepsn.length" class="rulePart">
      <div class="work">
        <van-cell-group v-for="(messageItem,messageIndex) in approval_process.approvepsn" :key='messageIndex'>
          <van-field class="nf-field-input-left" disabled v-model.trim="messageItem.message" required clearable :label="`${messageItem.name}备注 ` " type="textarea" placeholder="" rows="3" autosize />
        </van-cell-group>
      </div>
    </div>

    <div v-if="approve_status==9&&!isMyApprove" class="screen_fixed cenCen">
      <van-button @click="examine_repeal()" class="cursor maxWidth" style="width:100%" icon="replay" type="info">撤销</van-button>
    </div>
    <approveDatile :query="quarterInfo" :message="message" v-if="isMyApprove&&!quarterInfo.status"></approveDatile>
  </div>
</template>
<script>
import rulePart from "@/components/assembly/rulePart"; //写死规定
import service from "@/api";
import state from "@/components/js/state";
import approveDatile from "./../myApprove/approveDatile";
export default {
  components: { rulePart, approveDatile },
  data() {
    return {
      approve_status: "", //审批状态
      message: "", //备注
      isMyApprove: false, //是否从我的审批中进入的
      state: state, //审批状态
      approval_process: {}, //审批进度 submitpsn提交人 approvepsn审批人 status=0待审核
      quarterInfo: {}, //季度信息
      from: [], //填写的表单
      approval: {} //审批数据
    };
  },
  created() {
    // console.log(this.$route.query);
    this.isMyApprove = this.$route.query.isMyApprove || false;
    this.quarterInfo = this.$route.query || {};
    this.examine_findById();
  },
  methods: {
    // 获取当前季度信息
    async examine_findById() {
      this.$store.state.loading = true;
      this.$store.state.loadingText = "获取数据中";
      const { data = {} } = await service.examine_findById({
        id: this.quarterInfo.id
      });
      this.$store.state.loading = false;
      this.approval_process =
        JSON.parse(JSON.stringify(data.approval_process)) || {};
      this.approve_status = data.approve_status;

      if (data.approval_process && data.approval_process.approvepsn.length) {
        // 审批已拒绝后面不显示
        this.approval_process.approvepsn = [];
        for (let i = 0; i < data.approval_process.approvepsn.length; i++) {
          if (data.approval_process.approvepsn[i].status == 2) {
            this.approval_process.approvepsn.push(
              data.approval_process.approvepsn[i]
            );
            break;
          }
          this.approval_process.approvepsn.push(
            data.approval_process.approvepsn[i]
          );
        }
        // 审批已拒绝后面不显示
      }

      this.approval = data;
      // console.log(this.approval);
      this.from = [];
      data.examineList.map(item => {
        if (item.question_type == 2) {
          // 只添加不是写死部分
          this.from.push(item);
        }
      });
    },
    //  初始化当前进度
    initProcessActive() {
      if (
        !this.approval_process.approvepsn ||
        !this.approval_process.approvepsn.length
      ) {
        return 0;
      }
      let array = this.approval_process.approvepsn;
      let value = 0;
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        if (element.status && element.status != 0) {
          value = index + 1;
        }
      }
      return value;
    },
    // 审核撤销
    async examine_repeal() {
      const alertRes = await this.$alert("此操作将进行审核撤销");
      if (!alertRes) {
        return;
      }
      const {
        id,
        quarter_id,
        quarter_name,
        user_id,
        user_name
      } = this.approval;

      let subData = {
        id,
        quarter_id,
        quarter_name,
        user_id,
        user_name
      };
      this.$store.state.loading = true;
      this.$store.state.loadingText = "撤销数据中";
      const { success = false } = await service.examine_repeal(subData);
      this.$store.state.loading = false;
      if (success) {
        this.$toast.success("撤销成功");
        this.$goBack();
      }
    }
  }
};
</script>

<style scoped>
@import "./../../../components/public.css";
</style>